<template>
	<el-card class = "custom-card">
		<template #header>
			<div class = "custom-card-header">
				<h3>{{ currentModeTitle }}表单</h3>
			</div>
		</template>

		<div class = "custom-card-body">
			<slot />
		</div>

		<template #footer>
			<div class = "custom-card-footer">
			</div>
		</template>
	</el-card>
</template>

<script lang = "ts" setup>
import { computed, defineProps } from 'vue'

const props = defineProps<{ mode: 'login' | 'register' | 'users' | 'products' }>()
const currentModeTitle = computed(() => {
	// props.mode === 'login' ? '登录' : '注册'
	switch (props.mode) {
		case 'login':
			return '登录'
		case 'register':
			return '注册'
		case 'users':
			return '用户'
		case 'products':
			return '商品'
	}
})
</script>

<style scoped>
.custom-card {
	height: 99.7vh;
}

.custom-card-header {
	background: none;
	padding: 1rem;
}

.custom-card-body {
	padding: 1rem;
}

.custom-card-footer {
	background: none;
	padding: 1rem;
}
</style>